<template>
	<div class="page-content">
		<el-card class="box-card">
		  	<ul class="icon-list">
		  		<li>
		  			<i class="el-mengquandui iconfont"></i>
		  			<span>萌犬队</span>
		  			<span>el-mengquandui</span>
		  		</li>
		  		<li>
		  			<i class="el-tubiaoku iconfont"></i>
		  			<span>图标库</span>
		  			<span>el-tubiaoku</span>
		  		</li>
		  		<li>
		  			<i class="el-wangzhan iconfont"></i>
		  			<span>网站</span>
		  			<span>el-wangzhan</span>
		  		</li>
		  		<li>
		  			<i class="el-yonghu iconfont"></i>
		  			<span>用户</span>
		  			<span>el-yonghu</span>
		  		</li>
		  		<li>
		  			<i class="el-weixin iconfont"></i>
		  			<span>微信</span>
		  			<span>el-weixin</span>
		  		</li>
		  		<li>
		  			<i class="el-loadings iconfont"></i>
		  			<span>loading</span>
		  			<span>el-loadings</span>
		  		</li>
		  		<li>
		  			<i class="el-shijian iconfont"></i>
		  			<span>时间</span>
		  			<span>el-shijian</span>
		  		</li>
		  		<li>
		  			<i class="el-xitongguanli iconfont"></i>
		  			<span>系统设置</span>
		  			<span>el-xitongguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-zhuti_tiaosepan_o iconfont"></i>
		  			<span>主题色彩</span>
		  			<span>el-zhuti_tiaosepan_o</span>
		  		</li>
		  		<li>
		  			<i class="el-jindu iconfont"></i>
		  			<span>进度</span>
		  			<span>el-jindu</span>
		  		</li>
		  		<li>
		  			<i class="el-fenxiang iconfont"></i>
		  			<span>分享</span>
		  			<span>el-fenxiang</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli1 iconfont"></i>
		  			<span>角色管理</span>
		  			<span>el-jiaoseguanli1</span>
		  		</li>
		  		<li>
		  			<i class="el-menu-management iconfont"></i>
		  			<span>菜单管理</span>
		  			<span>el-menu-management</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli iconfont"></i>
		  			<span>用户管理</span>
		  			<span>el-jiaoseguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-bangzhu iconfont"></i>
		  			<span>帮助</span>
		  			<span>el-bangzhu</span>
		  		</li>
		  	</ul>
		</el-card>
		<el-card class="box-card">
		  	<ul class="icon-list">
		  		<li>
		  			<i class="el-mengquandui iconfont"></i>
		  			<span>萌犬队</span>
		  			<span>el-mengquandui</span>
		  		</li>
		  		<li>
		  			<i class="el-tubiaoku iconfont"></i>
		  			<span>图标库</span>
		  			<span>el-tubiaoku</span>
		  		</li>
		  		<li>
		  			<i class="el-wangzhan iconfont"></i>
		  			<span>网站</span>
		  			<span>el-wangzhan</span>
		  		</li>
		  		<li>
		  			<i class="el-yonghu iconfont"></i>
		  			<span>用户</span>
		  			<span>el-yonghu</span>
		  		</li>
		  		<li>
		  			<i class="el-weixin iconfont"></i>
		  			<span>微信</span>
		  			<span>el-weixin</span>
		  		</li>
		  		<li>
		  			<i class="el-loadings iconfont"></i>
		  			<span>loading</span>
		  			<span>el-loadings</span>
		  		</li>
		  		<li>
		  			<i class="el-shijian iconfont"></i>
		  			<span>时间</span>
		  			<span>el-shijian</span>
		  		</li>
		  		<li>
		  			<i class="el-xitongguanli iconfont"></i>
		  			<span>系统设置</span>
		  			<span>el-xitongguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-zhuti_tiaosepan_o iconfont"></i>
		  			<span>主题色彩</span>
		  			<span>el-zhuti_tiaosepan_o</span>
		  		</li>
		  		<li>
		  			<i class="el-jindu iconfont"></i>
		  			<span>进度</span>
		  			<span>el-jindu</span>
		  		</li>
		  		<li>
		  			<i class="el-fenxiang iconfont"></i>
		  			<span>分享</span>
		  			<span>el-fenxiang</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli1 iconfont"></i>
		  			<span>角色管理</span>
		  			<span>el-jiaoseguanli1</span>
		  		</li>
		  		<li>
		  			<i class="el-menu-management iconfont"></i>
		  			<span>菜单管理</span>
		  			<span>el-menu-management</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli iconfont"></i>
		  			<span>用户管理</span>
		  			<span>el-jiaoseguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-bangzhu iconfont"></i>
		  			<span>帮助</span>
		  			<span>el-bangzhu</span>
		  		</li>
		  	</ul>
		</el-card>
		<el-card class="box-card">
		  	<ul class="icon-list">
		  		<li>
		  			<i class="el-mengquandui iconfont"></i>
		  			<span>萌犬队</span>
		  			<span>el-mengquandui</span>
		  		</li>
		  		<li>
		  			<i class="el-tubiaoku iconfont"></i>
		  			<span>图标库</span>
		  			<span>el-tubiaoku</span>
		  		</li>
		  		<li>
		  			<i class="el-wangzhan iconfont"></i>
		  			<span>网站</span>
		  			<span>el-wangzhan</span>
		  		</li>
		  		<li>
		  			<i class="el-yonghu iconfont"></i>
		  			<span>用户</span>
		  			<span>el-yonghu</span>
		  		</li>
		  		<li>
		  			<i class="el-weixin iconfont"></i>
		  			<span>微信</span>
		  			<span>el-weixin</span>
		  		</li>
		  		<li>
		  			<i class="el-loadings iconfont"></i>
		  			<span>loading</span>
		  			<span>el-loadings</span>
		  		</li>
		  		<li>
		  			<i class="el-shijian iconfont"></i>
		  			<span>时间</span>
		  			<span>el-shijian</span>
		  		</li>
		  		<li>
		  			<i class="el-xitongguanli iconfont"></i>
		  			<span>系统设置</span>
		  			<span>el-xitongguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-zhuti_tiaosepan_o iconfont"></i>
		  			<span>主题色彩</span>
		  			<span>el-zhuti_tiaosepan_o</span>
		  		</li>
		  		<li>
		  			<i class="el-jindu iconfont"></i>
		  			<span>进度</span>
		  			<span>el-jindu</span>
		  		</li>
		  		<li>
		  			<i class="el-fenxiang iconfont"></i>
		  			<span>分享</span>
		  			<span>el-fenxiang</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli1 iconfont"></i>
		  			<span>角色管理</span>
		  			<span>el-jiaoseguanli1</span>
		  		</li>
		  		<li>
		  			<i class="el-menu-management iconfont"></i>
		  			<span>菜单管理</span>
		  			<span>el-menu-management</span>
		  		</li>
		  		<li>
		  			<i class="el-jiaoseguanli iconfont"></i>
		  			<span>用户管理</span>
		  			<span>el-jiaoseguanli</span>
		  		</li>
		  		<li>
		  			<i class="el-bangzhu iconfont"></i>
		  			<span>帮助</span>
		  			<span>el-bangzhu</span>
		  		</li>
		  	</ul>
		</el-card>
	</div>
</template>	
<script>
	export default {
		name:'icon'
	}
</script>
<style scoped>
	.icon-list{
		display: flex;
		flex-wrap: wrap;
	}
	.icon-list li{
		margin:10px 25px;
		display: flex;
		width:120px;
		white-space: nowrap;
		overflow:hidden;
		text-overflow: ellipsis;
		text-align: center;
		flex-direction: column;
		cursor: pointer;
		position: relative;
	}
	.icon-list span+span{
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.icon-list .iconfont{
		font-size:40px;
	}
	.icon-list li:before{
		content:'';
		position: absolute;
		left:0;
		top:0;
		bottom:0;
		right:0;
		background: #1b0101;
		opacity: 0;
		transition: all .5s;
	}
	.icon-list li:hover:before{
		display: block;
		opacity: 0.6;
	}
	.icon-list li:hover span,.icon-list li:hover .iconfont{
		color:#f91313;
	}
</style>